<template>
  <div class="scatter" :id="propses.id"></div>
</template>
<script lang='ts' setup>
// 引入图表库
import * as echarts from "echarts";
import { onMounted, ref } from "vue";
type EChartsOption = echarts.EChartsOption;
const propses = defineProps({
  id: {
    type: String, //类型字符串
    default: "",
  },
  xName: {
    type: String, //类型字符串
    default: "",
  },
  yName: {
    type: String, //类型字符串
    default: "",
  },

  data: {
    type: Array, //类型数组
    default: [],
  },
});

const clickIsDis = (id, data, xName, yName) => {
  /**************设备概览图表start********************/
  var chartDom = document.getElementById(id)!;
  setTimeout(() => {
    var myChart = echarts.init(chartDom);
    var option: EChartsOption;

    const dataBJ = data;
    let color = ["#dd4444", "#fec42c", "#80F1BE"];
    const schema = [
      { name: "KW", text: "KW" },
      { name: "COP", text: "COP" },
    ];
    const itemStyle = {
      opacity: 0.8,
      shadowBlur: 10,
      shadowOffsetX: 0,
      shadowOffsetY: 0,
      shadowColor: "rgba(0,0,0,0.3)",
    };
    // let seriesData = [];
    // for (let i = 0; i < dataBJ.length; i++) {
    //   seriesData.push({
    //     name: "scatter",
    //     type: "scatter",
    //     itemStyle: {
    //       ...itemStyle,
    //       normal: {
    //         color: color[i],
    //       },
    //     },
    //     data: dataBJ[i],
    //   });
    // }

    option = {
      backgroundColor: "#f6f7f9",

      legend: {
        show: false,
      },
      grid: {
        left: "6%",
        right: "8%",
        top: "20%",
        bottom: "10%",
      },
      tooltip: {
        backgroundColor: "rgba(0,0,0,0.7)",
        borderColor: "rgba(0,0,0,0.7)",
        textStyle: {
          color: "rgba(255, 255, 255, .9)",
        },
        // formatter: function (param) {
        //   var value = param.value;
        //   // prettier-ignore
        //   return + value[0] + '+'
        //     + value[1];
        //   // + schema[1].text + '：' + value[1] + '<br>'
        //   // + schema[2].text + '：' + value[2] + '<br>'
        //   // + schema[3].text + '：' + value[3] + '<br>';
        // },
      },
      xAxis: {
        // type: "value",
        name: xName,
        nameGap: 16,
        nameTextStyle: {
          fontSize: 16,
        },
        // max: 31,
        splitLine: {
          show: false,
        },
        axisLabel: {
          color: "#333",
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "#333",
          },
        },
        data: Xdata.value,
      },
      yAxis: {
        type: "value",
        name: yName,
        nameLocation: "end",
        nameGap: 20,
        nameTextStyle: {
          fontSize: 16,
        },
        splitLine: {
          show: false,
        },
        axisLabel: {
          color: "#333",
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "#333",
          },
        },
      },
      series: [
        {
          name: "scatter",
          type: "scatter",
          data: dataBJ,
        }
      ],
    };
    if (Xdata.value.length > 12) {
      option.dataZoom = [{
        // 设置滚动条的隐藏与显示
        show: true,
        // 设置滚动条类型
        type: "slider",
        // // 设置背景颜色
        // backgroundColor: "rgba(216, 216, 216, 1)",
        // // 设置选中范围的填充颜色
        // fillerColor: "rgba(91,143,249,1)",
        // // 设置边框颜色
        // borderColor: "rgba(216, 216, 216, 1)",
        // 是否显示detail，即拖拽时候显示详细数值信息
        showDetail: false,
        // 数据窗口范围的起始数值
        startValue: 0,
        // 数据窗口范围的结束数值（一页显示多少条数据）
        endValue: 5,
        // empty：当前数据窗口外的数据，被设置为空。
        // 即不会影响其他轴的数据范围
        filterMode: "empty",
        // 设置滚动条宽度，相对于盒子宽度
        width: "100%",
        // 设置滚动条高度
        height: 10,
        // 设置滚动条显示位置
        left: "center",
        // 是否锁定选择区域（或叫做数据窗口）的大小
        zoomLock: false,
        // 是否开启刷选功能。你可以按住鼠标左键后框选出选中部分
        brushSelect: false,
        // 控制手柄的尺寸
        // handleSize: 1,
        // dataZoom-slider组件离容器下侧的距离
        bottom: 3,
        moveHandleStyle: {
          color: "rgba(216, 216, 216, 1)",
        }
      }]
    }
    option && myChart.setOption(option);
    /**************设备概览图表end********************/
    window.addEventListener("resize", function () {
      myChart.resize();
    });
  }, 200);
};
// 设置x轴
let Xdata = ref<Array<any>>([]);
function setxAxis(data) {
  data.forEach(item => {
    Xdata.value.push(item[0]);
  });
}
onMounted(() => {
  setxAxis(propses.data);
  clickIsDis(propses.id, propses.data, propses.xName, propses.yName);
});
defineExpose({ clickIsDis });
</script>
<style scoped>
.scatter {
  margin-top: 20px;
  background: #f6f7f9;
  width: 100%;
  border-radius: 12px;
  height: 294px;
  margin-bottom: 20px;
}
</style>